<template>
  <header>
    <div class="left">
      <div class="m-menu" :active="more ? '' : undefined" @click="more = !more">
        <i></i>
        <i></i>
        <i></i>
      </div>
    </div>
    <div class="menu" :more="more ? '' : undefined">
      <div class="mask" @click="more = false" @touchmove.prevent @mousewheel.prevent></div>

      <ul>
        <li>
          <router-link to="/">对话</router-link>
          <router-link to="/">商品</router-link>
          <router-link to="/">我的</router-link>
        </li>
      </ul>

      <div class="button">
        <button class="signin">登录</button>
        <button class="signup">注册</button>
      </div>
    </div>
    <router-link class="logo" to="/">
      <r-logo />
    </router-link>
    <div class="right">
      <div class="newchat" :active="newchat ? '' : undefined" @click="newchat = !newchat">
        <i class="l"></i>
        <i class="t"></i>
      </div>

      <div>

      </div>
    </div>
  </header>
</template>

<script type="text/javascript">

export default {
  name: "Rheaders",
  data() {
    return {
      more: false,
      newchat: false,
    }
  },
  props: {
  },
  computed: {
  },
  methods: {
  },
  mounted() {
  },
}
</script>

<style lang="scss" scoped>
header {
  padding: 1em 2em;
  border-bottom: 1px solid rgb(229 231 235 / 10%);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2em;
  position: fixed;
  width: 100%;
  backdrop-filter: blur(3px);
  margin-bottom: 0;

  .logo {
    svg {
      fill: #fff;
      display: block;
      align-items: center;
      width: 10em;

    }

  }

  .left {
    display: flex;
    justify-content: center;

    .m-menu {
      cursor: pointer;
      padding: 1em;
      margin: -1em;

      i {
        transition: all .3s;
        width: 1.5em;
        height: 2px;
        background-color: #fff;
        display: block;
        margin-top: 6px;
      }

      // l {
      //   transform: translateY(8px) rotate(-45deg);
      // }


      &[active] {
        :nth-child(1) {
          transform: translateY(8px) rotate(-45deg);
        }

        :nth-child(2) {
          opacity: 0;
        }

        :nth-child(3) {
          transform: translateY(-8px) rotate(45deg);
        }
      }
    }
  }


  .right {
    display: flex;
    justify-content: center;

    .newchat {
      cursor: pointer;
      padding: 1em;
      margin: -1em;

      i {
        transition: all .3s;
        width: 1.5em;
        height: 2px;
        background-color: #fff;
        display: block;
        margin-top: 6px;
      }

      :nth-child(1) {
        transform: translateY(4px) rotate(90deg);
      }

      :nth-child(2) {
        transform: translateY(-4px) rotate(0deg);
      }

      &[active] {
        :nth-child(1) {
          transform: translateY(4px) rotate(180deg);
        }



        :nth-child(2) {
          transform: translateY(-4px) rotate(90deg);
        }
      }

    }
  }

  .menu {
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    &>* {
      position: relative;
    }

    .mask {
      display: none;
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }

    ul {
      li {
        a {
          padding: 1em 1.5em;
        }

        a:hover {
          color: #38bdf8;
        }
      }
    }

    .button {
      button {
        cursor: pointer;
        padding: .5em 1em;
        border-radius: .5em;
        font-weight: 600;
        background-color: #334155;
        border: 1px solid;
        margin-left: 1em;
      }

      .signin {
        border-color: #38bdf8;
        color: #38bdf8;
      }

      .signup {
        border-color: rgb(229 231 235 / 10%);
        color: #fff;
      }
    }
  }

  @media screen and (max-width:600px) {
    .m-menu {
      display: block;
    }

    .menu {
      display: none;
      position: absolute;
      left: 0;
      top: 100%;
      padding: 1em;
      flex-direction: column;
      background-color: #1e293b;
      border-radius: .5em;
      width: max-content;
      border: 1px solid rgb(229 231 235 / 20%);

      ul {
        padding-bottom: 1em;
        border-bottom: 1px solid rgb(229 231 235 / 10%);
        margin-bottom: 1em;
      }

      &[more] {
        display: flex;

        .mask {
          display: block;
        }
      }
    }
  }

}
</style>